<template>
    <el-container>
        <el-aside width="15%"></el-aside>
        <el-main>
            <el-alert v-if="reserved" v-bind:title="title1" type="success" show-icon></el-alert>
            <el-alert v-if="!reserved" v-bind:title="title2" type="info" show-icon></el-alert>
            <el-divider></el-divider>
            <!--栅格-->
            <el-row :gutter="20">
                <el-col :offset="6" :span="6">
                    <div style='font-size:32px;font-family: Helvetica Neue;border-radius:12px;background-color:lightskyblue;box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2)'>
                        预约有效时间<br>
                        <i class="el-icon-time"></i>
                        <span>{{timeStr}}</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-progress type="circle" :percentage="100 * time/totalTime" status="success" style=""></el-progress>
                </el-col>
            </el-row>

            <el-divider></el-divider>
            <el-button type="primary" icon="el-icon-arrow-left" @click="$router.push('/reserve')">
                预约车位页面
            </el-button>
            <el-button type="info" @click="$router.push('/path')">停车引导页面<i
                    class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-main>
        <el-aside width="15%"></el-aside>
    </el-container>
</template>

<script>
import axios from 'axios'
export default {
    name: 'MyReserve',
    data() {
        return {
            // activeNames: ['2'],
            //
            reserved: null,
            reservedSpace: null,
            title1: "请按照引导路线停入4号车位（预约到期时间  ）",
            title2: "您未预约车位或预约已过期",
            //
            totalTime: 1 * 60,
            time: 0,
            timeStr: "0:00",
            //
            timerId: null
        }
    },
    methods: {
        getReserveInfo () {
            axios.get("/park/reserveInfo").then(response => {
                if (response.data.flag) {
                    this.reservedSpace = response.data.res;
                    this.title1 = "请按照引导路线停入" + this.reservedSpace.id
                        + "号车位（预约到期时间" + this.reservedSpace.startTime + "）";
                    this.startTimer(new Date(this.reservedSpace.startTime));
                } else {
                    this.title2 = "您未预约车位或预约已过期";
                }
                this.reserved = response.data.flag;
            }, err => {
                console.warn(err);
            });
        },
        startTimer (startTime) {
            if (this.timerId != null) {
                clearInterval(this.timerId);
            }
            var now = new Date();
            this.time = Math.trunc((startTime.getTime() - now.getTime()) / 1000);
            var that = this;
            this.timerId = setInterval(function () {
                if (that.time <= 0) {
                    clearInterval(that.timerId);
                    that.reserved = false;
                    that.reservedSpace = null;
                    return;
                }

                that.time--;
                var time = that.time;
                var seconds = time % 60
                var minutes = Math.trunc(time / 60);
                var hours = Math.trunc(minutes / 60);
                minutes = minutes % 60;

                that.timeStr = (hours > 0 ? hours.toString() + ":" : "")
                    + (minutes < 10 ? ('0' + minutes.toString()) : minutes.toString()) + ":"
                    + (seconds < 10 ? ('0' + seconds.toString()) : seconds.toString());
            }, 1000);
        },
    },
    mounted() {
        this.getReserveInfo()
    },
}
</script>

<style scoped>
    .el-aside {
        background-color: whitesmoke;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 60px;
        padding-top: 0px;
        padding-bottom: 0px;
        overflow: hidden;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>